<template>
  <view class="work-container">
    <!-- 轮播图 -->
    <uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
      <swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
        <swiper-item v-for="(item, index) in data" :key="index">
          <view class="swiper-item" @click="clickBannerItem(item)">
            <image :src="item.image" mode="aspectFill" :draggable="false" />
          </view>
        </swiper-item>
      </swiper>
    </uni-swiper-dot>

    <!-- 宫格组件1 -->
    <uni-section title="服务中心" type="line"></uni-section>
    <view class="grid-body">
      <uni-grid :column="4" :showBorder="false">
        <uni-grid-item>
          <view class="grid-item-box">
            <uni-icons type="person-filled" size="30"></uni-icons>
            <text class="text" @click="toDriver()">代驾服务</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view class="grid-item-box">
            <uni-icons type="staff-filled" size="30"></uni-icons>
            <text class="text" @click="toUsedcar()">二手车大厅</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view class="grid-item-box">
            <uni-icons type="color" size="30"></uni-icons>
            <text class="text">拼车服务</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view class="grid-item-box">
            <uni-icons type="settings-filled" size="30"></uni-icons>
            <text class="text">租车服务</text>
          </view>
        </uni-grid-item>
      </uni-grid>
	  <!-- 身份选择弹窗 -->
	  <u-popup :show="showIdentityModal" @close="closeModal" mode="center">
		<view class="identity-modal">
		  <view class="modal-title">选择身份</view>
		  <view class="modal-buttons">
			<button class="modal-button" @click="goToUserPage">乘客</button>
			<button class="modal-button" @click="goToDriverPage">车主</button>
			<button class="modal-button cancel" @click="closeModal">取消</button>
		  </view>
		</view>
	  </u-popup>
    </view>
  </view>
</template>

<script>
  import { isDriver } from '@/api/driver/driver';
  export default {
    data() {
      return {
        current: 0,
        swiperDotIndex: 0,
        data: [{
            image: '/static/images/banner/banner01.jpg'
          },
          {
            image: '/static/images/banner/banner02.jpg'
          },
          {
            image: '/static/images/banner/banner03.jpg'
          }
        ],
		showIdentityModal: false // 控制弹窗显示
      }
    },
    methods: {
	  toDriver() {
		this.showIdentityModal = true; // 点击代驾服务，显示弹窗
	  },
	  goToUserPage() {
		uni.navigateTo({
		  url: '/pages/work/driver/userIndex' // 假设用户页路径为pages/userIndex/userIndex
		});
		this.showIdentityModal = false; // 关闭弹窗
	  },
	  goToDriverPage() {
		// 调用封装的接口，判断是否为司机
		  isDriver().then(response => {
		    // 假设接口返回的数据格式为 { code: 200, data: boolean }，data为true表示已注册为司机
			console.log(response);
		    if (response.msg === "已注册") {
		      // 已注册为司机，跳转到司机首页
		      uni.navigateTo({
		        url: '/pages/work/driver/driverIndex'
		      });
		    } else {
		      // 未注册为司机，跳转到司机注册页
		      uni.navigateTo({
		        url: '/pages/work/driver/driverRegister' // 假设司机注册页路径
		      });
		    }
		    this.showIdentityModal = false; // 关闭弹窗
		  }).catch(error => {
		    uni.showToast({
		      title: '请求失败，请稍后再试',
		      icon: 'none'
		    });
		    console.error('判断司机身份失败：', error);
		  });
	  },
	  toUsedcar() {
	  		uni.navigateTo({
	  		  url: '/pages/work/usedcar/index' // 假设用户页路径为pages/userIndex/userIndex
	  		});
	  },
	  closeModal() {
		this.showIdentityModal = false; // 关闭弹窗（点击遮罩层时调用）
	  },
	  /* clickBannerItem(item) {
        console.info(item)
      },
      changeSwiper(e) {
        this.current = e.detail.current
      },
      changeGrid(e) {
        this.$modal.showToast('模块建设中~')
      } */
    }
  }
</script>

<style lang="scss" scoped>
  /* #ifndef APP-NVUE */
  page {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background-color: #fff;
    min-height: 100%;
    height: auto;
  }

  view {
    font-size: 14px;
    line-height: inherit;
  }
  /* #endif */

  .text {
    text-align: center;
    font-size: 26rpx;
    margin-top: 10rpx;
  }

  .grid-item-box {
    flex: 1;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
  }

  .uni-margin-wrap {
    width: 690rpx;
    width: 100%;
    ;
  }

  .swiper {
    height: 300rpx;
  }

  .swiper-box {
    height: 150px;
  }

  .swiper-item {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    height: 300rpx;
    line-height: 300rpx;
  }

  @media screen and (min-width: 500px) {
    .uni-swiper-dot-box {
      width: 400px;
      /* #ifndef APP-NVUE */
      margin: 0 auto;
      /* #endif */
      margin-top: 8px;
    }

    .image {
      width: 100%;
    }
  }
  .identity-modal {
    width: 100%;
    max-width: 320px;
    background-color: #fff;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  }
  
  .modal-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 24px;
    color: #333;
  }
  
  .modal-buttons {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
  
  .modal-button {
    width: 50%; /* 保持宽度比例，可根据需要微调 */
    height: 44px; /* 增大按钮高度 */
    line-height: 44px; /* 使文字垂直居中，与高度一致 */
    text-align: center;
    border-radius: 8px;
    border: none;
    outline: none;
    font-size: 15px; /* 调大字体大小 */
    cursor: pointer;
    /* 限制文字不换行，确保完整显示 */
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
	padding-left: 10px;
  }
  
  /* 不同按钮样式区分 */
  .modal-button:nth-child(1) {
    background-color: #007aff;
    color: #fff;
  }
  
  .modal-button:nth-child(2) {
    background-color: #f0ad4e;
    color: #fff;
  }
  
  .modal-button.cancel {
    background-color: #eee;
    color: #666;
  }
</style>
